<template>
	<view class="distribution">
		<!-- 头部 -->
		<view class="distribution_title">
			<view @click="Onhead(item)" :class="headindex==item.id?'title_list_a':'title_list_b'" class="title_list"
				v-for="(item,index) in headList" :key="index">
				{{item.name}}
			</view>
		</view>
		<!-- 数据 -->
		<view class="distribution_bos" v-for="(item,index) in dataList" :key="index">
			<view class="distribution_name">{{item.name}}</view>
			<view class="distribution_listbos">
				<view class="distribution_list font13 font-323232" v-for="(item1,index1) in item.list" :key="index1">
					{{item1}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			this.id = options.id
			//获取详情
			this.Ondistribution()
		},
		data() {
			return {
				headList: [], //头部
				headindex: '', //头部下标
				dataList: [], //数据
			}
		},
		methods: {
			//切换头部
			Onhead(res) {
				this.headindex = res.id
				this.Onfloor(res.id)
			},
			//头部
			Ondistribution() {
				this.$Http({
					url: 'buildingArea',
					data: {},
					token: false
				}).then(res => {
					this.headList = res.data
					this.headindex = res.data[0].id
					this.Onfloor(res.data[0].id)
				})
			},
			//内容
			Onfloor(e) {
				this.$Http({
					url: 'floor',
					data: {
						building_area_id: e
					},
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							let scan = decodeURIComponent(item.introduce);
							let options = scan.split("、")
							item.list = options
						})
						this.dataList = res.data
					}
				})
			}
		}
	}
</script>

<style>
	.distribution_title {
		display: flex;
		padding: 50rpx 30rpx 30rpx 30rpx;
		width: 750rpx;
		border-bottom: 1rpx #eeeeee solid;
	}

	.title_list {
		padding: 14rpx 24rpx;
		font-size: 26rpx;
	}

	.title_list:nth-of-type(1) {
		margin-right: 30rpx;
	}

	.title_list_a {
		background-color: #6bcbb6;
		color: #ffffff;
	}

	.title_list_b {
		border: 1rpx #eeeeee solid;
		color: #ababab;
	}

	.distribution_bos {
		width: 690rpx;
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx #eeeeee solid;
	}

	.distribution_name {
		width: 110rpx;
		text-align: center;
	}

	.distribution_listbos {
		width: 580rpx;
	}

	.distribution_list {
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
	}

	.homelifeis_rich_text {
		width: 750rpx;
		padding: 30rpx;
		/* font-size: 28rpx;
		color: #323232; */
	}

	.rich-img {
		width: 690rpx !important;
	}
</style>
